<template>
  <div>
    <div class="other">
      <div class="other_top">
        <div class="other_1">
          快速备注
        </div>
        <div class="other_2">
          <ul>
            <div class="o1">

              <li><span v-for="(item,index) in la"
                      :key="index"
                      :class="{change :btn == index}"
                      @click="chan(index) ">{{la[index]}}</span></li>
              <li><span @click="xuanze"
                      :class="['yuan',{'change':showmode} ]">不要香菜</span></li>
            </div>
            <div class="o2">
              <li><span @click="xuanze2"
                      :class="['yuan',{'change':showmode2} ]">不要洋葱</span></li>
              <li><span @click="xuanze3"
                      :class="['yuan',{'change':showmode3} ]">多点醋</span></li>
              <li><span @click="xuanze4"
                      :class="['yuan',{'change':showmode4} ]">多点葱</span></li>
            </div>

            <li><span v-for="(item,index) in bing"
                    :key="index"
                    :class="{yb :btn1==index}"
                    @click="yb(index)">{{bing[index]}}</span></li>
          </ul>
        </div>
      </div>
      <div class="other_bott">
        <div class="other_b1">
          其他备注
        </div>
        <div class="other_b2">
          <input type="text"
                 placeholder="请输入备注内容(可不填)">
        </div>
      </div>
      <button @click="sure"
              class="enter">确定</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Other',
  data () {
    return {
      btn: "0",
      btn1: "0",
      la: ['不要辣', '少点辣', '多点辣'],
      bing: ['去冰', '少冰'],
      showmode: '',
      showmode2: '',
      showmode3: '',
      showmode4: '',
      other: []
    }
  },
  methods: {
    sure () {
      this.$router.push({ name: 'Order' })
    },
    chan (index) {
      this.btn = index
      this.other.push(this.la[index])
      localStorage.setItem('otherinfor', JSON.stringify(this.other))
    },
    yb (index) {
      this.btn1 = index
      this.other.push(this.bing[index])
      localStorage.setItem('otherinfor', JSON.stringify(this.other))
    },
    xuanze () {
      this.showmode = true
      this.other.push('不要香菜')
      localStorage.setItem('otherinfor', JSON.stringify(this.other))
    },
    xuanze2 () {
      this.showmode2 = true
      this.other.push('不要洋葱')
      localStorage.setItem('otherinfor', JSON.stringify(this.other))
    },
    xuanze3 () {
      this.showmode3 = true
      this.other.push('多点醋')
      localStorage.setItem('otherinfor', JSON.stringify(this.other))
    },
    xuanze4 () {
      this.showmode4 = true
      this.other.push('多点葱')
      localStorage.setItem('otherinfor', JSON.stringify(this.other))
    },
  },
}
</script>

<style scoped>
.other_b1 {
  height: 51px;
  display: flex;
  align-items: center;
  margin-left: 15px;
}
.other_b2 input {
  width: 340px;
  background-color: #f9f9f9;
  border: 1px solid #eee;
  resize: none;
  min-height: 117px;
  border-radius: 0.2rem;
  font-size: 13px;
  color: #666;
  margin-left: 15px;
  display: flex;
  box-sizing: border-box;
  padding: 0 0 70px 10px;
}
.other_bott {
  margin-top: 60px;
  background-color: white;
  height: 200px;
  width: 375px;
  margin-left: -10px;
}
.change {
  background-color: rgb(0,146,232) !important;
  color: white !important;
}
.yb {
  background-color: rgb(0,146,232);
  color: white;
}
.yuan {
  background-color: white;
  color: black;
}
.enter {
  box-sizing: border-box;
  /* margin-top: 15px; */
  margin-left: 8px;
  border: none;
  outline: none;
  border-radius: 5px;
  width: 340px;
  height: 46px;
  color: white;
  background-color: #4cd964;
  font-weight: 700;
  font-size: 18px;
}
.other_2 {
  margin-top: 10px;
  margin-left: -15px;
}
.o1,
.o2 {
  display: flex;
}

li {
  margin: 15px;
}
li span {
  border-radius: 3px;
  padding: 7px 14px;
  border: 1px solid #3190e8;
}
.other {
  width: 100%;
  box-sizing: border-box;
  /* padding: 15px 10px; */
  height: 228.5px;
  background-color: white;
  margin-top: 10px;
}
body {
  background-color: #f5f5f5;
}
</style>